{extend name="base" /}
{block name="css"}
<style>
    /** 应用快捷块样式 */
    .console-app-group {
        padding: 16px;
        border-radius: 4px;
        text-align: center;
        background-color: #fff;
        cursor: pointer;
    }

    .console-app-group .console-app-icon {
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin-bottom: 6px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 32px;
        color: #69c0ff;
    }

    .console-app-group:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, .08);
    }

    /** //应用快捷块样式 */

    /** 小组成员 */
    .console-user-group {
        position: relative;
        padding: 10px 0 10px 60px;
    }

    .console-user-group .console-user-group-head {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 50%;
        left: 12px;
        margin-top: -16px;
    }

    .console-user-group .layui-badge {
        position: absolute;
        top: 50%;
        right: 8px;
        margin-top: -10px;
    }

    .console-user-group .console-user-group-name {
        line-height: 1.2;
    }

    .console-user-group .console-user-group-desc {
        color: #8c8c8c;
        line-height: 1;
        font-size: 12px;
        margin-top: 5px;
    }

    /** 卡片轮播图样式 */
    .admin-carousel .layui-carousel-ind {
        position: absolute;
        top: -41px;
        text-align: right;
    }

    .admin-carousel .layui-carousel-ind ul {
        background: 0 0;
    }

    .admin-carousel .layui-carousel-ind li {
        background-color: #e2e2e2;
    }

    .admin-carousel .layui-carousel-ind li.layui-this {
        background-color: #999;
    }

    /** 广告位轮播图 */
    .admin-news .layui-carousel-ind {
        height: 45px;
    }

    .admin-news a {
        display: block;
        line-height: 60px;
        text-align: center;
        border-radius: 4px;
    }
</style>
{/bolck}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            <div class="layui-form-item">
                <form action="{:request()->url()}" class="layui-form" method="get">
                    <div class="layui-inline text-right">
                        <div class="layui-input-inline mr0">
                            <input name="dateframe" class="layui-input" id="test16" value="{$dateframe}" type="text" autocomplete="off" placeholder="选择时间区间"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-warm ajax-search"><i class="fa fa-search"></i> 查看</button>
                    </div>
                </form>
            </div>
        </div>
        <hr class="layui-bg-gray">
        <!--数据-->
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <p class="lay-big-font">{$data.customer}</p>
                        <p>新增客户<span class="layui-badge layui-badge-green pull-right">累计:{$data.customer_all}</span></p>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <p class="lay-big-font">{$data.track}</p>
                        <p>新增回访<span class="layui-badge layui-badge-blue pull-right">累计:{$data.track_all}</span></p>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span>{:number_format($data.order,2)}</p>
                        <p>新增销售<span class="layui-badge layui-badge-red pull-right">共:{$data.order_count} 笔</span></p>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <p class="lay-big-font">{$data.contract_count}</p>
                        <p>新签合同</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 统计图表 -->
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="tjDivMonth" style="height:600px;"></div>
                    </div>
                </div>
            </div>
        </div>
        
        
    </div>
</div>
{/block}
{block name="js"}
<!-- js部分 -->
<script type="text/javascript" src="/static/hqui/libs/layui/layui.js"></script>
<script type="text/javascript" src="/static/hqui/js/common.js?v=315"></script>
<script src="/static/hqui/libs/echarts/echarts.min.js"></script>
<script src="/static/hqui/libs/echarts/echartsTheme.js"></script>
<script>
    layui.use(['layer', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var admin = layui.admin;

        // -------------------------------------------------------------------------
        // 渲染周签到图表
        var myCharts3 = echarts.init(document.getElementById('tjDivMonth'), myEchartsTheme);
        var options3 = {
            title:{
                show:true,
                text:'{$dateframe} 销售记录',
                left:'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#E0E0E0'
                    }
                },
                formatter: '{b}日<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#10B4E8;"></span>{a0}: {c0}'
            },
            color: ['#10B4E8', '#FFA800'],
            legend: {
                orient: 'vertical',
                right: '0px',
                top: '25px',
                data: ['销售额']
            },
            grid: {
                top: '120px',
                left: '35px',
                right: '55px'
            },
            xAxis: {
                name: '日期',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'category',
                data: {:json_encode($date)},
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A',
                    interval: function (index, value) {
                        if (index == 0 || ((index + 1) % 1 == 0)) {
                            return true;
                        }
                        return false;
                    }
                }
            },
            yAxis: {
                name: '金额',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'value',
                boundaryGap: ['0', '10%'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A'
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                minInterval: 1
            },
            series: [
                {
                    name: '销售额',
                    type: 'line',
                    smooth: false,
                    data: [],
                    label:{
                        show:true
                    }
                },
                {
                    name: '支出',
                    type: 'line',
                    smooth: false,
                    data: [],
                    label:{
                        show:true
                    }
                }
            ]
        };
        myCharts3.setOption(options3);
        // 获取数据
        var res3 = {:json_encode($month_data)};
        var dateList = [], signNums = [], unSignNums = [];
        for (var i = 1; i < {$now_j}; i++) {
            //var one = res3.data[i];
            dateList.push(res3.date[i]);
            signNums.push(res3.price[i]);
        }
        myCharts3.setOption({
            xAxis: {data: dateList},
            series: [{data: signNums}, {data: unSignNums}]
        });
        // -------------------------------------------------------------------------

        // 窗口大小改变事件
        window.onresize = function () {
            myCharts1.resize();
            myCharts2.resize();
            myCharts3.resize();
        };

    });
</script>
<script>
    laydate.render({
        elem: '#test16'
        ,range: '-'
    });
</script>
{/block}